<div>
    <div class="accordion">
        <div class="accordion-group">
            <div class="accordion-heading" sc-collapse="in">
                <a class="accordion-toggle" href="javascript:void(0)">
                    Token Verification
                </a>
            </div>
            <div class="accordion-body collapse">
                <div class="accordion-inner">
                    <div class="form-horizontal">
                        <div class="control-group">
                            <label class="control-label" for="inputAppID">AppID</label>
                            <div class="controls">
                                <input ng-model="input.appid" type="text" id="inputAppID" placeholder="Your AppID">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="inputChannelID">Room/Channel</label>
                            <div class="controls">
                                <input ng-model="input.channelID" type="text" id="inputChannelID" class="span5" placeholder="Channel ID or Room Name">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="inputAppKey">App Key</label>
                            <div class="controls">
                                <input ng-model="input.appKey" type="password" id="inputAppKey" class="span7" placeholder="App Key generated by Console">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="inputUserID">UserID</label>
                            <div class="controls">
                                <input ng-model="input.userid" type="text" id="inputUserID" placeholder="Your UserID">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="inputNonce">Nonce</label>
                            <div class="controls">
                                <input ng-model="input.nonce" type="text" id="inputNonce" class="span5" placeholder="Your Nonce">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="inputTimestamp">Timestamp</label>
                            <div class="controls">
                                <input ng-model="input.timestamp" type="text" id="inputTimestamp" placeholder="Your Timestamp">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="inputToken">Token</label>
                            <div class="controls">
                                <input ng-model="input.token" type="text" id="inputToken" class="span7" placeholder="Your Generated Token">
                            </div>
                        </div>
                        <div class="control-group">
                            <div class="controls">
                                <button class="btn" ng-click="checkToken()">Verify</button>
                            </div>
                        </div>
                    </div>
                    <div ng-show="control.show">
                        <ul>
                            <li>
                                <div class="{{control |tc_filter_token}}">
                                    {{control.actual == control.expect? 'PASS':'FAILED'}} <br/>
                                    Expect: {{control.expect}} <br/>
                                    Actual: {{control.actual}}
                                </div>
                            </li>
                            <li>
                                <div>
                                    Algorithm:
                        <pre>
token = sha256(
    appID + appKey + channelID + userID + nonce + str(timestamp)
)

appID: {{input.appid}}
appKey: {{input.appKey}}
channelID: {{input.channelID}}
userID: {{input.userid}}
nonce: {{input.nonce}}
timestamp: {{input.timestamp}}
token: {{input.token}}
expect: sha256({{input.appid}}{{input.appKey}}{{input.channelID}}{{input.userid}}{{input.nonce}}{{input.timestamp}}) = {{control.expect}}
                        </pre>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
